<template>
  <div class="commonBtn">
    <div class="main-label">
      <div v-html="labelName"></div>
    </div>
    <div class="main-btn-container">
      <el-button type="primary" v-for="(item,index) of buttons"  :key="index" @click="handleClick(item)">
        <img :src="'/static/img/16/'+item.icon" style="vertical-align: text-bottom"/>
        {{item.name}}
      </el-button>

      <slot name="appendCondition"></slot>

      <div style="margin-left: 20px;display: inline-block;white-space: nowrap;">
        <slot name="conditions" ></slot>
      </div>

    </div>
  </div>
</template>

<script>
  export default {
      props:{
          buttons:Array,
          labelName:String
      },
      data(){
          return{

          }
      },
      mounted() {
      },
      methods:{
          handleClick(item) {
            this.$emit("onButtonClick",item)
          }
      }
  }
</script>

<style lang="less" scoped>
  .main-label{
    border: #ccc 1px solid;
    border-bottom: 0;
    background-image: url(../../assets/img/datagrid_header_bg.gif);
    background-repeat: repeat-x;
    height: 27px;
    line-height: 27px;
    font-weight: bold;
    padding-left: 5px;
  }
  .main-btn-container{
    border: #ccc 1px solid;
    border-top: 0;
    margin-bottom: 1px;
    overflow: auto;
    scrollbar-face-color: #e4e4e4;
    scrollbar-heightlight-color: #f0f0f0;
    scrollbar-3dlight-color: #d6d6d6;
    scrollbar-arrow-color: #240024;
    scrollbar-darkshadow-color: #d6d6d6;
    background: #F7F7F7;
    height: 36px;
    line-height: 35px;
    white-space: nowrap;
  }

  .el-button{
    display: inline-flex;
    text-decoration: none;
    align-items: center;
    vertical-align: center;
    font: 8px/8px HelveticaNeue, Arial;
    padding: 0px 11px;
    border: 1px solid #FFF;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 9pt;
    margin-left: 2px;
    line-height: 25px;
    color: #000;
    outline: none;
    background-image: url(../../assets/img/datagrid_header_bg.gif);
    background-repeat: repeat-x;
    border: 1px solid #ccc;
    &:hover {
      color: #FFF;
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#33bbee', endColorstr='#2288cc');
      border: 1px solid #d51900;
      background: linear-gradient(top, #d51900, #d51900);
      background: -moz-linear-gradient(top, #d51900, #d51900);
      background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#d51900), to(#d51900));
      text-shadow: -1px -1px 1px #1c6a9e;
    }
    /deep/span{
      display: block;
    }
  }
</style>
